<template>
	<view>
		<view class="text-center">
			<image class="cu-avatar xl round margin-top" 
				:src="uinfo&&uinfo.avatar ? uinfo.avatar : '/src/static/logo.png'" 
				mode="aspectFill"

			></image>

			<view class="margin text-xl">
				<button class="cu-btn bg-orange" @click="handleAvatar">点击修改头像</button>
			</view>
		</view>
		<view class="padding-lr margin-lr">
			<view class="margin-tb padding-lr">
				真实姓名
			</view>
			<custom-input v-model="name" holder="请输入真实姓名">
				<text class="iconfont icon-wode"></text>
			</custom-input>
		</view>
		<view class="padding-lr margin-lr">
			<view class="margin-tb padding-lr">
				手机号码
			</view>
			<custom-input v-model="phone" holder="请输入手机号">
				<text class="iconfont icon-jian1"></text>
			</custom-input>
		</view>
		<view class="padding margin-lr">
			<view class="cu-progress striped radius">
				<view v-if="isProgress" class="bg-orange" :style="{width:progressValue+'%'}">
					{{progressValue}}%
				</view>
				<text v-else class="text-center" @click="handelProgress">上传简历</text>
			</view>
		</view>
		<view class="padding margin-top flex justify-around">
			<button class="cu-btn bg-gray block" @click="">取消</button>
			<button class="cu-btn bg-orange block" @click="handleUpdate">确认</button>
		</view>
	</view>
</template>

<script setup lang="ts">
import type{ Ref } from 'vue';
import { computed, ref} from 'vue';
import {useStore} from 'vuex'
import {userRegister, userUpdate} from '@/api/user'

// #ifdef H5
import { pathToBase64 } from '@/js_sdk/mmmm-image-tools/index'
import CloudSDK from 'leancloud-storage'
// #endif

const name:Ref<string> = ref('')
const phone:Ref<string> = ref('')
const avatar:Ref<string> = ref('')
const store = useStore()
const uinfo = computed(()=>store.state.user.uinfo)
//更新用户信息
const handleUpdate = async()=>{
	let {objectId,sessionToken} = uinfo.value
	let res = await userUpdate(objectId,sessionToken,{
		"name":name.value,
		"phone":phone.value,
		"avatar":avatar.value
	})
	console.log('更新成功',res);
}
// 文件上传
const isProgress:Ref<boolean> = ref(false)
const progressValue:Ref<number> = ref(10)
// #ifdef H5
// 选择头像
const handleH5Avatar = async ()=>{
	// 选择图像文件
	uni.chooseImage({
		count:1,
		success:async (file)=>{
			console.log(file)
			let temp = file.tempFilePaths[0]
			let base64 = await pathToBase64(temp)
			  
			let data = {'base64':base64}
			let res:any = await new CloudSDK.File('avatar.png',data).save()//构建云资源对象
			console.log(res)
			let {url} = res.attributes
			//更新vuex用户信息
			store.commit('user/loginSuccess',{
				...uinfo.value,//原来的用户信息
				avatar:url,//新上传的用户信息
				})
			avatar.value = url
		}
	})
}
//上传简历
const handelProgress = ()=>{
	uni.chooseFile({
		count:1,
		success:async(file)=>{
			let temp = file.tempFilePaths[0]
			isProgress.value = true //显示进度条
			progressValue.value = 50
			let base64 = await pathToBase64(temp)
			const data = { base64 }; //构建
			progressValue.value = 70
			let res = await new CloudSDK.File('xxx.pdf',data).save()
			progressValue.value = 100
			console.log(res);
		}
	})
}
// #endif
const handelNH5Avatar = ()=>{
	uni.chooseImage({
		count:1,
		success:async (file)=>{
			let temp = file.tempFilePaths[0]
			uni.uploadFile({
				url:'http://1.95.51.46:3000/upload',
				filePath:temp,
				name:'avatar',
				success:(res)=>{
					console.log(res.data);
					let url = JSON.parse(res.data).url
					store.commit('user/loginSuccess',{
						...uinfo.value,//原来的用户信息
						avatar:url,//新上传的用户信息
						})
					avatar.value = url
				}
			})
		}
	})
}

const handleAvatar = ()=>{
	// #ifdef H5
	handleH5Avatar()
	// #endif
	// #ifndef H5
	// 适配鸿蒙端头像上传
	handelNH5Avatar()
	// #endif
}


</script>

<style lang="scss">
page{
	background-color: white;
	image{
		width: 200upx;
		height: 200upx;
	}
}
.cu-progress{
	height: 100upx;
	text{
		display: block;
		width: 100%;
	}
}
</style>
